<template>
	<view>
		
		<page-container :show="isShow" :overlay="false" custom-style="height:calc(100vh);overflow:scroll;background-color: #F4F4F4;" @beforeleave="onBeforeLeave">
			<view class="examPage">
				<u-navbar :title="'支付成功'" :custom-back="customBacks" :immersive="false" :is-back="true" :background="background" :border-bottom="false"></u-navbar>
				<view style="height: 100rpx;"></view>
				<view class="pay_wrap">
					<view class="pay_time u-flex"><image src="/static/images/weixinzhifu.png"></image>支付成功</view>
					<view class="pay_price"><text>¥</text>{{price}}</view>
					<view class="sub_name">{{shopName}}</view>
				</view>
				
				<view class="Pay_type">
					<view class="type_item u-flex">
						<view class="pay_name u-flex">
							<image :src="BestImgUrl+'/home_logo.png'"></image>
							<view class="p_name">
								<view>关注领食惠探店</view>
								<view>加入同城探店圈·享受更多福利</view>
							</view>
						</view>
						<view class="choose_icon" @click="toGongzhonghao()">去关注</view>
					</view>
				</view>
        <!--微信客服二维码-->
        <view class="wx_kefu">
          <view style="text-align: center;font-size: 32rpx;padding-top: 30rpx;margin-bottom: 30rpx">添加客服微信优惠信息及时享</view>
          <view style="text-align: center;width: 400rpx;height:400rpx;margin: 0 auto;">
            <image :show-menu-by-longpress="true" src="https://td.lszbg.com/public/uploads/h5/home/ServiceRWM2.jpg" style="width: 400rpx;height: 400rpx;border-radius: 30rpx;"></image>
          </view>
        </view>
				
				<view class="bottom-btn-wrap u-flex">
					<view class="bottom-fixed-btn" @click="wancheng()">
						<view class="btn finish">完成</view>
					</view>
					<!-- <view class="bottom-fixed-btn" @click="wancheng()">
						<view class="btn pay">立即使用</view>
					</view> -->
				</view>
			</view>
		</page-container>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				isShow: true, // 最开始设置为显示
				background: {
					backgroundColor: '#ffffff',
				},
				BestImgUrl: app.globalData.imgurl,
				order_id: "",
				shopName: "",
				price: ""
			}
		},
		onLoad(ops) {
			console.log('订购信息',ops)
			this.order_id = ops.order_id
			this.shopName = ops.name
			this.price = ops.price
		},
		methods: {
			onBeforeLeave() {
				let that = this
				that.isShow = false
				uni.switchTab({
					url: '/pages/WoDe/WoDe'
				})
			},
			customBacks() {
				//this.isShow = false
				let that = this
				uni.switchTab({
					url: '/pages/WoDe/WoDe'
				})
			},
			wancheng(){
				let data = {
					id: this.order_id
				}
				uni.reLaunch({
					url: '/subpackageA/pages/TanDianProcess/TanDianProcess?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			tohome(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
    // 关注公众号
      toGongzhonghao(){
        const url = 'https://mp.weixin.qq.com/s/LbqXJns_r-XmVILVRSb9eA'
        uni.navigateTo({
          url: '/pages/Webview/Webview?url=' + url
        })
      }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
		position: relative !important;
		top: 0px !important;
	}
	.bottom-btn-wrap {
		align-items: center;
		justify-content: space-between;
		.bottom-fixed-btn {
			flex: 1;
		}
	}
	.pay_wrap {
		text-align: center;
		.pay_time {
			font-size: 24rpx;
			color: $uni-color-success;
			align-items: center;
			justify-content: center;
			image {
				width: 40rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
		.pay_price {
			font-size: 75rpx;
			font-weight: bold;
			margin: 80rpx 0 0 0;
			text {
				font-size: 36rpx;
			}
		}
		.sub_name {
			font-size: 24rpx;
			color: $zzy-text-color-666666;
		}
	}
	.Pay_type {
		padding: 30rpx;
		.type_item {
			background-color: #F4F4F4;
			border-radius: 20rpx;
			padding: 22rpx 22rpx;
			.pay_name {
				align-items: center;
				image {
					width: 94rpx;
					height: 94rpx;
					margin-right: 22rpx;
				}
				.p_name {
					view:nth-child(1){
						font-size: 30rpx;
						font-weight: bold;
					}
					view:nth-child(2){
						color: $zzy-text-color-666666;
						font-size: 24rpx;
					}
				}
			}
			.choose_icon {
				margin-left: auto;
				background-color: #FF4E0D;
				color: #ffffff;
				border-radius: 200rpx;
				text-align: center;
				width: 146rpx;
				height: 52rpx;
				line-height: 52rpx;
				font-weight: bold;
				font-size: 26rpx;
			}
		}
	}
</style>
